﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="choosefood.aspx.cs" Inherits="weikebuluo.wxgzpt.wechat.orderfood.choosefood" %>



<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <link rel="stylesheet" type="text/css" href="styles/css/spoutlet/wei_canyin.css" media="all">
<link rel="stylesheet" type="text/css" href="styles/css/spoutlet/wei_dialog.css" media="all">
<script type="text/javascript" src="styles/src/jQuery.js"></script>
<script type="text/javascript" src="styles/src/spoutlet/wei_webapp_v2_common.js"></script>
    <script src="/Scripts/Su.common.js" type="text/javascript"></script>
<title>商品选择</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
</head>
<body id="page_allMenu">
    
<div class="center">
    <nav id='navBar'>
        
            <!--<dt>分类</dt>-->
        
    </nav>

    <section id="infoSection">
        <article>
            <!--div class="h2">推荐菜</div-->
            <div id="pInfo">
                <!--current list-->
            </div>
        </article>
    </section>
<!--    <footer class="footFix">
	    <button class="btn_change" id="my_menu">我的菜单<span class="num">2</span></button>
	    <button onClick='location.href="/sps/webfood/ComboNums?aid=1071&outletid=13717&wechatid=osXr8jlCc84RfxtAgm0cxi-1Bl-Q&v=52dad443fe163b34522dd3c2ebd7f82a"'>智能选餐</a></button>
    </footer>-->
    <div id="footer_menu" class="footer footer_menu">
            <ul class="clear">
                <li><a href="javascript:void(0);" class="onactive" ><span class="icons icons_2"></span><label>点菜</label></a></li>
                <li><a href="myorder.aspx?sid=<%=Request.QueryString["sid"] %>&wxid=<%=Request.QueryString["wxid"] %>"  ><span class="icons icons_3"></span><label>我的订单</label></a></li>
                <li><a href="javascript:void(0);" id="my_menu"><span class="icons icons_5"><label id="num" class="num">0</label></span></a></li>
            </ul>
        </div>
        <script>
            var footer = document.getElementById("footer_menu");
            var evtObj = {
                handleEvent: function (evt) {
                    if ("A" == evt.target.tagName) {
                        evt.target.classList.toggle("on");
                    }
                }
            }
            footer.addEventListener("touchstart", evtObj, false);
            footer.addEventListener("touchend", evtObj, false);
        </script>
    </div>
</div>
    <script type="text/javascript">
        window.selected = {
            total: 0,
            dishes: {}
        };
        var view_const_dish_SPECIAL_PRICE_YES = '2';
        var view_const_dish_HOT_YES = '2';

        function setHeight() {
            var cHeight;
            cHeight = document.documentElement.clientHeight;
            cHeight = cHeight + "px"
            document.getElementById("navBar").style.height = cHeight;
            document.getElementById("infoSection").style.height = cHeight;
        }


        function getAllList() {
            var params = {
            }
            MLoading.show('加载中');
            $.ajax({
                url: "choosefood.aspx?action=list&sid=" + getQueryString("sid")+"&wxid="+getQueryString("wxid"),
                type: "post",
                success: function (res) {
                    MLoading.hide();
                    res = eval("(" + res + ")");
                    window.res = res;
                    ai = window.res[0];
                    switchList();
                    
                    var str = '<dl>';
                    $(res).each(function (i) {
                        str += '<dd categoryid="' + res[i].foodclass_id + '" class="' + (i == 0 ? " active" : "") + '" onclick="switchList(' + res[i].foodclass_id + ');">' + res[i].foodclass_name + '</dd>';
                    });
                    $("#navBar").html(str + '</dl>');
                }
            });

        }
        //
        function switchList(id) {
            var ai = {};
            if (id) {
                var dds = _qAll('#navBar dd');
                for (var i = 0; ci = window.res[i]; i++) {
                    dds[i].className = null;
                    if (id == ci.foodclass_id) {
                        ai = ci;
                        dds[i].className = "active";
                    }
                }
            } else {
                ai = window.res[0];
            }
            var checkHtml = '';
            var TPL = '<dl dunitname="例" dsubcount="1" dishid="{foodlist_id}" dname="{foodlist_name}" dtaste=""  dprice="{foodlist_price}"   disspecial="1" onclick="selectOne(this, {foodlist_id}, {foodlist_price});">\
                    <dt><h3>{foodlist_name}</h3></dt>\
                    <dd>\
                        <a href="javascript:void(0)" class="dataIn" onclick="showImgDetail(this);event.stopPropagation();">\
                            <img src="{foodlist_picurl}" alt="" title="">';

            TPL += '<span style="font-size:10px;"></span>';


            TPL += '</a>\
                    </dd>\
                    <dd>\
                        <em>{foodlist_price}元/例</em>\
                    </dd>\
                    <button shopinfo="" class="{curState}"></button>\
                </dl>';
            document.getElementById("pInfo").innerHTML = iTemplate.makeList(TPL, ai.dishes, function (k, v) {
                if (v.discount_price) {
                    v.price = v.discount_price;
                }
                return {
                    curState: (v.foodlist_id in window.selected.dishes) ? "selectBtn choose choosen" : "selectBtn choose  unchoose",
                    check: (v.check == '1') ? "checked" : ''
                }
            });
        }
        //show img detail
        function showImgDetail(thi) {
            var parentDl = thi.parentNode.parentNode;
            var childImg = thi.childNodes[0]
            if (childImg.nodeType == 3) {
                childImg = thi.childNodes[1];
            }

            popPic(childImg.src,
                    parentDl.getAttribute('dname'),
                    parentDl.getAttribute('dprice') + '元/' + parentDl.getAttribute('dunitName'),
                    parentDl.getAttribute('dIsSpecial'),
                    parentDl.getAttribute('dSpecialPrice') + '元/' + parentDl.getAttribute('dunitName'),
                    parentDl.getAttribute('dsubCount'),
                    parentDl.getAttribute('dtaste'),
                    parentDl.getAttribute('ddescribe'),
                    parentDl.getAttribute('dishot')
                );
        }
        //

        function selectOne(container, dishid, price) {
            var btn = container.querySelectorAll("button")[0];
            if (btn.className.indexOf("choosen") > -1) {
                _removeClass(btn, 'choosen');
                _addClass(btn, 'unchoose');
                //unselected
                delete window.selected.dishes[dishid];
                window.selected.total -= 1;
            } else {
                _removeClass(btn, 'unchoose');
                _addClass(btn, 'choosen');
                //selected
                window.selected.dishes[dishid] = {
                    price: price,
                    num: 1
                }
                window.selected.total += 1;

            }
            if (!("origTotal" in window.selected)) {
                window.selected.origTotal = parseInt(_q(".footer_menu .num").innerHTML);
            }
            _q(".footer_menu .num").innerHTML = window.selected.origTotal + window.selected.total;
            console.log(window.selected);
        }
        //
        function addToMenu() {
            var params = '[';
            for (var key in window.selected.dishes) {
                params += '{"dishes_id":' + key + ",",
                params += '"price":' + window.selected.dishes[key].price + ",",
                params += '"nums":' + window.selected.dishes[key].num + "},"
            }
            params = params.replace(/,$/, "");
            params += ']';

            $.ajax({
                'url': 'choosefood.aspx?action=addmenu&sid=' + getQueryString("sid") + '&wxid=' + getQueryString("wxid"),
                'data': { 'order': params },
                'type': 'POST',
                'async': 'false',
                'success': function (db) {
                    location.href = 'myfood.aspx?sid=' + getQueryString("sid") + '&wxid=' + getQueryString("wxid");
                }
            });

        }

        //后台可自行扩展参数
        //调用自定义弹层
        function popPic(imgUrl, title, price, isSpecial, specialPrice, people, teast, assess, isHot) {
            var _title = title,
                _price = price,
                _people = null; //people,
            _teast = teast,
                _assess = assess;

            var hotHtml = '<b>' + isHot + '</b>';
            _tmpHtml = "<div class='content'>" + hotHtml + "<img src='" + imgUrl + "' alt='' title=''><h2>" + _title;

            if (isSpecial == view_const_dish_SPECIAL_PRICE_YES) {
                _tmpHtml += "<i>" + specialPrice + "</i><del>" + _price + "</del>";
            } else {
                _tmpHtml += "<i>" + _price + "</i>";
            }

            if (_people) {
                _tmpHtml += "<span>" + _people + "人点过</span>";
            }
            _tmpHtml += "</h2>";

            if (_teast) {
                _tmpHtml += "<h3>口味：" + _teast + "</h3>";
            }

            if (_assess) {
                _tmpHtml += "<p>" + _assess + "</p>";
            }

            _tmpHtml += '</div>';
            MDialog.popupCustom(_tmpHtml, true, true);
        }

        window.addEventListener("DOMContentLoaded", function () {
            getAllList();
            setHeight();
        }, false);
        window.onresize = function () { setHeight(); }
    </script>

<script>
    $(document).ready(function () {
        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            WeixinJSBridge.call('hideToolbar');
        });
        $('#my_menu').click(function () {
            addToMenu();

        });

    });

</script>
</body>

</html>
